<template>
  <div class="base-panels bgWhite">
    <h2 class="title2">驻疆机构</h2>


    <div class="t_comp" v-for="item in list">
      <h3>{{ item.branchName }}</h3>
      <p><span>机构类型</span>{{ item.branchType }}</p>
      <p><span>办公地址</span>{{ item.branchAddress }}</p>
    </div>


    <div v-if="list.length===0">
      <Empty description="暂无数据" />
    </div>

  </div>
</template>
<script lang="ts">
import {defineComponent, inject, onMounted, ref } from 'vue';
import { getBranchApi  } from '/@/api/foreign';
import { Empty } from 'ant-design-vue';

interface model {
  branchAddress?: string;//	机构办公地址
  branchId?: string;//	id
  branchName?: string;//	分支机构名称
  branchType?: string;//	分支机构类型
}

export default defineComponent({
  components: { Empty },
  setup() {
    const corpId = inject('corpId') as string;
    const list = ref<model[]>([])
    const changeHandler = () => {
      getBranchApi( { corpId }).then( ({success,data}) => {
        if(success){
          list.value =data
        }
      })
    }

    onMounted(changeHandler)

    return {
       changeHandler ,list
    }
  },
})
</script>

<style lang="less" scoped>

.base-panels{
  padding: 20px;
}

.t_comp {
  padding: 22px 30px;
  margin-bottom: 15px;
  background: #F3F3F3;
  border: 1px solid #EAEDF3;

  &:last-child {
    margin-bottom: 0;
  }

  h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }

  p{
    padding: 0;
    margin: 0;
    font-weight: 500;

    span{
      margin-right: 10px;
      color: #999;
    }
  }
}
</style>

